<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js与网页的简单交互</title>
		<style>
			#show_click{
				width: 200px;
				height: 200px;
				border: 2px solid green;
			}
			.choose_dialog{
				width: 200px;
				height: 200px;
				border: 2px dotted orange;
			}
		</style>
		<script>
			//alert("直接弹出");
			//alert警告框会根据浏览器的不同显示出不同的样式
			
			function showClick(){
				alert("用点击事件触发的警告");
			}
			function choose(){
				//可以查看点击的是确定还是取消
				var result = confirm("确定退出吗？");
				//alert(result);
				var resultDiv = document.getElementById("show_click");
				if(result==true){
					resultDiv.innerHTML="点击了确定";
				}else{
					resultDiv.innerHTML="点击了取消";
				}
				
			}
			function btnClick(){
				prompt("房东的猫");
			}
		</script>
	</head>
	<body>
		<!--点击事件-->
		<!--pc端，移动端的产品都会对用户呢提供鼠标点击或触屏操作的功能
			网页要做出响应，这个响应就叫做点击事件
			在HTML中，所有的标签都可以设置点击事件，用户鼠标点击时给出回馈操作
			1.定义标签，设置id
			2.在js代码中提供点击函数
			3.在标签描述中设置点击事件onclick为该点击函数
		-->
		<div id="show_click" onclick="showClick()">请触发点击事件</div>
		<div class="choose_dialog" onclick="choose()">请再次确认您的选择</div>
		<input type="button" value="请输入" onclick="btnClick()"/>
	</body>
</html>
